const path = require('path')
// 打包时自动拷贝页面到输出目录
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

// webpack：打包、合并、压缩、转译 js、scss、css...
// webpack 打包过程：
// 从入口文件开始读取，查找引入的所有文件，构建依赖树，
// 查找到所有文件之后，开始打包、压缩、合并。。。
// 最终输出成一个或多个js文件

// webpack的配置文件，运行webpack时会自动读取此文件
module.exports = {
  // 添加打包前后文件的对应关系
  devtool: 'source-map',
  // 打包模式
  mode: 'development', // 'development：开发模式，方便调试代码' or 'production：生产模式，压缩优化代码'
  // 入口文件：webpack从哪个文件开始处理
  // 入口文件是数组，把多个入口文件合并成一个文件
  // entry: ['./src/index.js', './src/detail.js', './src/search.js',],
  // 多个入口
  entry: {
    index: './src/index/index.js',
    search: './src/search/search.js',
    detail: './src/detail/detail.js',
  },
  // 出口
  output: {
    // 输出的目录
    path: path.join(__dirname, './build'),
    // 输出的文件名称
    filename: '[name].js'
  },
  // 配置 loader 允许 webpack 处理其他格式的文件
  module: {
    // 配置loader
    rules: [
      {
        // 当 webpack 解析到 css 后缀的文件时使用此loader处理
        test: /\.(css|scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader, // 把 js 中 css 提取到对应的 css 文件中
          // 'style-loader', // 把解析好的 css 内容插入到页面的 style 标签内
          'css-loader', // 解析 css 文件
          'sass-loader' // 解析 sass 文件, 解析时需要依赖 sass 
        ]
      },
      {
        // 处理引入的图片
        test: /\.(jpg|png|svg|webp)$/,
        type: 'asset' // 自动把小于 8kb 的图片转成 base64 格式
      },
      {
        test: /\.html$/,
        // 解析html中的图片
        use: ['html-loader']
      },
      {
        // 通过 babel 把 es6+ 语法转译成低版本语法
        test: /\.js/,
        // 解析时排除 node_modules 中的文件
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  // 插件: 扩展webpack功能，给webpack增加额外的功能
  plugins: [
    // 打包时自动拷贝页面到输出目录，并且自动引入打包后的 js 文件
    new HtmlWebpackPlugin({
      template: './src/index/index.html',
      filename: 'index.html',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      template: './src/search/search.html',
      filename: 'search.html',
      chunks: ['search']
    }),
    new HtmlWebpackPlugin({
      template: './src/detail/detail.html',
      filename: 'detail.html',
      chunks: ['detail']
    }),
    new MiniCssExtractPlugin()
  ],
  // // 配置开发服务器
  devServer: {
    port: 3000, // 开发服务器的端口
    open: true, // 启动开发服务器时自动打开浏览器
    // 配置请求代理
    proxy: [
      {
        // 请求 /bw/api/list 自动转发到 http://localhost:3001/bw/api/list
        // context: ['/bw'],
        // target: 'http://localhost:3001',

        // 请求 /bw/api/list 自动转发到 http://localhost:3001/api/list
        context: ['/bw'],
        target: 'http://localhost:3001',
        // 转发路径时把 /bw 删除
        pathRewrite: { '^/bw': '' },
      },
    ],
  },
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'Utils': path.resolve(__dirname, 'src/utils'),
    }
  }
}